<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<template slot="query">
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="请输入库名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
		</template>
		<sw-data-operate slot="header" v-model="checkedData" :list="tableData" :mode.sync="showMode">
			<template slot="batch">
				<el-button size="small" type="text" icon="el-icon-rank">移动到</el-button>
				<el-button size="small" type="text" icon="el-icon-delete">批量删除</el-button>
			</template>
		</sw-data-operate>
		<sw-block-table slot="component" v-model="checkedData" :list="tableListData" :mode="showMode" is-check>
			<template v-slot:bodybox="{ data }">
				<div class="catalog_block_body">
					<el-tag effect="dark" :color="data.titColor" hit>{{ data.name.charAt(0) }}</el-tag>
					<h2>{{ data.name }}</h2>
				</div>
			</template>
			<template v-slot:buttons="{ data }">
				<el-button-group>
					<el-button size="medium" type="text" @click="handleDataOperate('move', data)">移动到</el-button>
					<el-button size="medium" type="text" @click="handleDataOperate('look', data)">详情</el-button>
					<el-button size="medium" type="text" @click="handleDataOperate('edit', data)">编辑</el-button>
					<el-button size="medium" type="text" @click="handleDeleteData(data)">删除</el-button>
				</el-button-group>
			</template>
			<template slot="columns">
				<el-table-column prop="initial" label="首字" width="60" align="center">
					<template slot-scope="{ row }">
						<el-tag class="catalog_table_tag" effect="dark" :color="row.titColor" hit>{{ row.name.charAt(0) }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="编目名称" min-width="240"></el-table-column>
				<el-table-column prop="createName" label="创建者" width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="186">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleDataOperate('move', data)">移动到</el-button>
						<el-button size="medium" type="text" @click="handleDataOperate('look', data)">详情</el-button>
						<el-button size="medium" type="text" @click="handleDataOperate('edit', data)">编辑</el-button>
						<el-button size="medium" type="text" @click="handleDeleteData(data)">删除</el-button>
					</template>
				</el-table-column>
			</template>
		</sw-block-table>
		<template slot="page" v-if="dataCount > 0">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<catalog-move v-model="moveDialog" :data="formData" :catalogs="tableData" @refresh="queryTableData()"></catalog-move>
		<catalog-drawer v-model="detailDrawer" :data="formData" @refresh="queryTableData()"></catalog-drawer>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import catalogMove from './move';
import catalogDrawer from './drawer';
import listMixins from '@/mixins/listMixins';
import swDataOperate from '../common/dataOperate';
import { getCatalogList } from '@/api/data/tbNetDefCatalog';
export default {
	mixins: [listMixins],
	components: { swDataOperate, catalogMove, formDialog, catalogDrawer },
	data() {
		return {
			pageName: '编目',
			showMode: '1',
			formData: {},
			moveDialog: false,
			formDialog: false,
			detailDrawer: false,
			checkedData: []
		};
	},
	computed: {
		listFunction() {
			return eval(getCatalogList);
		},
		tableListData() {
			let colors = this.$genRandomHexColor(this.tableData.length);
			return this.tableData.map((item, index) => {
				let obj = { ...item };
				obj['titColor'] = colors[index];
				return obj;
			});
		},
		requestParams() {
			return { ...this.queryData, king: '2' };
		}
	},
	methods: {
		/* //添加数据
		handleOpenForm() {
			this.formData = {};
			this.formDialog = true;
		}, */

		//编目操作
		handleDataOperate(type, data) {
			this.formData = { ...data };
			if (type === 'look') {
				this.detailDrawer = true;
			}
			if (type === 'edit') {
				this.formDialog = true;
			}
			if (type === 'move') {
				this.moveDialog = true;
			}
			if (type === 'refresh') {
				this.queryTableData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.catalog_block_body {
	display: flex;
	align-items: center;
	padding: 16px;
	h2 {
		font-size: 16px;
		font-weight: normal;
		margin-left: 16px;
		line-height: 1.75;
	}
	.el-tag {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		width: 56px;
		height: 56px;
		font-size: 24px;
		border-width: 0;
	}
}
.catalog_table_tag {
	width: 36px;
	height: 36px;
	font-size: 16px;
	border-width: 0;
	line-height: 36px;
}
</style>
